<template>
  <div class="vm-common-statistics">
    <div class="sourcing-container-header">
      <h5 class="container-h-t">
        <i class="saa-icon screen" @click="openPopup"></i>
        <span id="current-selected-time">{{ curMonthStart }}~{{ curMonthEnd }}</span>
      </h5>
    </div>
    <button-tab
      v-model="Index"
    >
      <button-tab-item @on-item-click="consoleIndex()" selected>出库</button-tab-item>
      <button-tab-item @on-item-click="consoleIndex()">入库</button-tab-item>
    </button-tab>
    <!-- 出入库分析 出库 start -->
    <div class="sourcing-out" v-if="Index == 0">
      <div class="sourcing-container-body">
        <h5 class="container-b-t">
          出库类型金额占比（元）
        </h5>
        <div id="sourcing-main-out"></div>
      </div>
      <div class="sourcing-container-footer">
        <section class="sourcing-warp-item" v-for="(item, key) in out_of_storageData" :key="key">
          <div class="item-warp-left">
            <i :class="['saa-icon',item.iconClass]"></i>
            <div><span>{{ item.name }}</span>
              <p>{{ item.nums }}份合同</p></div>
          </div>
          <div class="item-warp-center"><span>{{ item.percentNum }}</span></div>
          <div class="item-warp-right"><span>{{ item.value }}</span></div>
        </section>
      </div>
    </div>
    <!-- 出入库分析 出库 end -->

    <!-- 出入库分析 入库 start -->
    <div class="sourcing-entry" v-if="Index == 1">
      <div class="sourcing-container-body">
        <h5 class="container-b-t">
          入库类型金额占比（元）
        </h5>
        <div id="sourcing-main-entry"></div>
      </div>
      <div class="sourcing-container-footer">
        <section class="sourcing-warp-item" v-for="(item, key) in WarehousingData" :key="key">
          <div class="item-warp-left">
            <i :class="['saa-icon',item.iconClass]"></i>
            <div><span>{{ item.name }}</span>
              <p>{{ item.nums }}份合同</p></div>
          </div>
          <div class="item-warp-center"><span>{{ item.percentNum }}</span></div>
          <div class="item-warp-right"><span>{{ item.value }}</span></div>
        </section>
      </div>
    </div>
    <!-- 出入库分析 入库 end -->

    <!-- 出库、入库筛选 -->
    <mt-popup
      class="vm-screen-warp"
      v-model="popupVisible"
      position="right">
      <div class="vm-require-warp" ref="popupWarpper">
        <div class="content">
          <div class="vm-require-screen-item">
            <h5>月份</h5>
            <ul class="vm-require-screen-list">
              <li
                :class="{'now': key == monthIndex}"
                :key="key"
                v-for="(item, key) in datas.month"
                @click="selectedMonth(key)">
                {{ item.month }}
              </li>
            </ul>
          </div>
          <div class="vm-require-screen-item">
            <h5>仓库名称{{ companyName }}</h5>
            <ul class="vm-require-screen-company">
              <li>
                <input type="text" v-model="companyName" @input="indexOfBywarehouse" placeholder="请输入仓库名称">
              </li>
            </ul>
          </div>
          <div class="vm-require-screen-item">
            <ul class="saa-search-data com-box">
              <li
                :class="[{'active': key == 0},{'all':key == 0}]"
                :key="list.key"
                :data-id="list.id"
                v-for="(list, key) in datas.warehouse">
                {{ list.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="vm-screen-footer">
        <mt-button type="default" @click="reset">重置</mt-button>
        <mt-button type="danger" @click="submitData">确认</mt-button>
      </div>
    </mt-popup>

  </div>
</template>

<script>
  import BScroll from 'better-scroll';
  import $ from 'zepto'
  import echarts from 'echarts'
  import {ButtonTab, ButtonTabItem} from 'vux'
  import {
    source_getstoreroomListouth5,
    source_getstoreroomListinh5,
    source_getCompanywarehouseinfo
  } from '@/api/statistics_analysis'
  import {getCurMonth, getCountDays} from '@/utils/vm-common-getTime.js'
  import {userInfoByArguments} from '@/utils/userHandler.js'
  import vmCommonSearchPopup from '@/components/vm-common-search-popup'
  import {mapState} from 'vuex'

  export default {
    data() {
      return {
        Index: 0, // 出入库切换索引 0为出入 1为入库
        curMonthStart: getCountDays(getCurMonth(), 1, 2), // 当月开始月份
        curMonthEnd: getCountDays(getCurMonth(), 2, 2), // 当月结束月份
        datas: {
          month: [
            {month: '一月', value: 1},
            {month: '二月', value: 2},
            {month: '三月', value: 3},
            {month: '四月', value: 4},
            {month: '五月', value: 5},
            {month: '六月', value: 6},
            {month: '七月', value: 7},
            {month: '八月', value: 8},
            {month: '九月', value: 9},
            {month: '十月', value: 10},
            {month: '十一月', value: 11},
            {month: '十二月', value: 12}
          ],
          warehouse: new Array()
        },
        popupVisible: false,
        monthIndex: getCurMonth() - 1,
        companyName: '',
        warehouse: new Array()
      }
    },
    computed: {
      ...mapState({
        // 出库数据 start
        out_of_storageData: state => state.statistics_analysis.out_of_storageData,
        out_of_storageSum: state => state.statistics_analysis.out_of_storageSum,
        out_of_storagecurrentMouth: state => state.statistics_analysis.out_of_storagecurrentMouth,
        // 出库数据 end

        // 入库数据 start
        WarehousingData: state => state.statistics_analysis.WarehousingData,
        WarehousingSum: state => state.statistics_analysis.WarehousingSum,
        WarehousingMouth: state => state.statistics_analysis.WarehousingMouth
        // 入库数据 end
      })
    },
    mounted() {
      this.initScroll();
      this.getwarehouseList(); // 获取出入库仓库列表数据
      this.getsource_analysis_out(true); // 获取出库数据
      $(function () {
        $('.saa-search-data').on("tap", "li", function () {
          if ($(this).hasClass('all')) {
            $(this).addClass('active').siblings().removeClass('active');
          } else {
            if ($(this).hasClass('active')) {
              $(this).removeClass('active');
            } else {
              $(this).siblings('.all').removeClass('active');
              $(this).addClass('active');

              var lock = true;
              $.each($('.saa-search-data').find('li:not(.all)'), function (i, item) {
                if (!$(this).hasClass('active')) {
                  lock = false;
                }
              });
              if (lock) {
                $('.saa-search-data').find('li').removeClass('active').siblings('.all').addClass('active');
              }
            }
          }
        });
      })
    },
    watch: {
      // 出库数据改变后，动态获取当前月份及数据更新
      out_of_storageData(newV) {
        this.curMonthStart = getCountDays(this.out_of_storagecurrentMouth, 1, 2); // 当月开始月份
        this.curMonthEnd = getCountDays(this.out_of_storagecurrentMouth, 2, 2); // 当月结束月份
        this.getsource_analysis_out(false);
      },
      // 入库数据改变后，动态获取当前月份及数据更新
      WarehousingData() {
        this.curMonthStart = getCountDays(this.WarehousingMouth, 1, 2); // 当月开始月份
        this.curMonthEnd = getCountDays(this.WarehousingMouth, 2, 2); // 当月结束月份
        this.getsource_analysis_entry(false);
      }
    },
    methods: {
      // 打开筛选弹框
      openPopup() {
        this.popupVisible = true;
      },
      // 筛选弹框日期选择
      selectedMonth(index) {
        this.monthIndex = index;
      },
      // 搜索公司仓库
      indexOfBywarehouse() {
        // 用户搜索信息 -> 公司信息
        let companyName = this.companyName;
        if (!companyName) {
          this.datas.warehouse = this.warehouse;
        } else {
          this.datas.warehouse = this.warehouse.filter(item => {
            return item.name.indexOf(companyName) != -1;
          });
          let newArr = [];
          this.datas.warehouse.forEach(item => {
            newArr.push(item.id);
          });
          var strId = newArr.join(',');
          this.datas.warehouse.unshift(({
            id: strId,
            name: "全部"
          }));
        }
      },
      // 筛选弹框点击确定按钮
      async submitData() {
        let month = this.datas.month[this.monthIndex].value;
        let startTime = getCountDays(month, 1, 1);
        let endTime = getCountDays(month, 2, 1);
        let warehouse_id = '';
        $.each($('.saa-search-data').find('li.active'), function () {
          warehouse_id += $(this).attr('data-id') + ',';
        });
        if (warehouse_id.endsWith(',')) {
          warehouse_id = warehouse_id.substring(0, warehouse_id.length - 1);
        }
        if (this.Index == 0) {
          await this.$store.dispatch("getOut_of_storageData", {startTime, endTime, month, warehouse_id});
        } else {
          await this.$store.dispatch("getWarehousingData", {startTime, endTime, month, warehouse_id});
        }

        this.popupVisible = false;
        this.getsource_analysis_out(false);
      },
      // 筛选弹框点击重置
      reset () {
        this.monthIndex = getCurMonth() -1;
        this.companyName = '';
      },
      // 改变出入库按钮时获取出入库数据
      consoleIndex() {
        if (this.Index == 0) {
          this.$store.commit("SET_INDEX", 0);
          this.getsource_analysis_out(true); // 获取出库数据
        } else if (this.Index == 1) {
          this.$store.commit("SET_INDEX", 1);
          this.getsource_analysis_entry(true); // 获取入库数据
        }
      },
      // 获取出库数据
      async getsource_analysis_out(flag) {
        if (flag) {
          let startTime = getCountDays(getCurMonth(), 1, 1);
          let endTime = getCountDays(getCurMonth(), 2, 1);
          let month = getCurMonth();
          await this.$store.dispatch("getOut_of_storageData", {startTime, endTime, month});
        }

        let sourcing_main_out = echarts.init(document.getElementById('sourcing-main-out'));
        sourcing_main_out.clear();
        sourcing_main_out.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [
            {
              name: '采购金额占比',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                },
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: this.out_of_storageData
            },
            {
              z: 1,
              radius: ['0%', '0%'],
              type: 'pie',
              data: [
                {
                  name: this.out_of_storageSum,
                  tooltip: { //提示框
                    show: false,
                  },
                  labelLine: {
                    normal: {
                      show: true
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      position: 'center',
                      textStyle: {
                        color: '#7d7d7d',
                        fontSize: '16',
                        lineHeight: '60',
                      }
                    }
                  }
                },
                {
                  value: 0,
                  name: '—' + '元' + '—',
                  tooltip: { //提示框
                    show: false,
                  },
                  label: {
                    normal: {
                      position: 'center',
                      show: true,
                      textStyle: {
                        fontSize: '16',
                        color: '#6b6b6b'
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: 'rgba(300,300,300,1)',
                      shadowBlur: 5,
                      shadowColor: 'rgba(0,176,255,1)'
                    }
                  }
                }
              ]
            }
          ]
        })
      },
      // 获取入库数据
      async getsource_analysis_entry(flag) {
        if (flag) {
          let startTime = getCountDays(getCurMonth(), 1, 1);
          let endTime = getCountDays(getCurMonth(), 2, 1);
          let month = getCurMonth();
          await this.$store.dispatch("getWarehousingData", {startTime, endTime, month});
        }
        let sourcing_main_out = echarts.init(document.getElementById('sourcing-main-entry'));
        sourcing_main_out.clear();
        sourcing_main_out.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [
            {
              name: '采购金额占比',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                },
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: this.WarehousingData
            },
            {
              z: 1,
              radius: ['0%', '0%'],
              type: 'pie',
              data: [
                {
                  name: this.WarehousingSum,
                  tooltip: { //提示框
                    show: false,
                  },
                  labelLine: {
                    normal: {
                      show: true
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      position: 'center',
                      textStyle: {
                        color: '#7d7d7d',
                        fontSize: '16',
                        lineHeight: '60',
                      }
                    }
                  }
                },
                {
                  value: 0,
                  name: '—' + '元' + '—',
                  tooltip: { //提示框
                    show: false,
                  },
                  label: {
                    normal: {
                      position: 'center',
                      show: true,
                      textStyle: {
                        fontSize: '16',
                        color: '#6b6b6b'
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: 'rgba(300,300,300,1)',
                      shadowBlur: 5,
                      shadowColor: 'rgba(0,176,255,1)'
                    }
                  }
                }
              ]
            }
          ]
        })
      },
      // 获取出入库仓库列表数据
      async getwarehouseList() {
        let companyId = userInfoByArguments('company_id');
        source_getCompanywarehouseinfo(companyId).then(res => {
          let data = res.data.data.warehouse;
          this.datas.warehouse = data;
          var newArr = [];
          this.datas.warehouse.forEach(item => {
            item.active = false;
            newArr.push(item.id);
          })
          var strId = newArr.join(',');
          this.datas.warehouse.unshift(({
            id: strId,
            name: "全部"
          }));
          this.warehouse = JSON.parse(JSON.stringify(this.datas.warehouse));
        });
      },
      initScroll(){
        this.$nextTick(()=>{
          if(!this.myscroll){
              this.myscroll = new BScroll(this.$refs.popupWarpper,{click:true})
          }else{
              this.myscroll.refresh();
          }
        })
      }
    },
    components: {
      ButtonTab,
      ButtonTabItem,
      'vm-common-search-popup': vmCommonSearchPopup
    }
  }
</script>

<style lang="scss" scoped>

  /deep/ .vux-button-tab-item {
    font-size:28px;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    color: #d9271b;
    border: 2px solid #d9271b; /* no */
    /deep/ &::after {
      border: 4px solid #04BE02; /* no */
    }
  }

  /deep/ .vux-button-group {
    padding: 0 155px;
    margin-bottom: 50px;
  }

  /deep/ .vux-button-group > a.vux-button-group-current {
    background-color: #f34c4f;
  }

  /deep/ .vux-button-group > a.vux-button-tab-item-first:after {
    border: none;
  }

  /deep/ .vux-button-group > a.vux-button-tab-item-last:after {
    border: none;
  }

  .vm-common-statistics {
    font-size: 22px;
    padding: 0 35px 40px 35px;
    .sourcing-container-header {
      .container-h-t {
        height: 1.4rem;
        line-height: 1.4rem;
        font-size: 0.293333rem;
        color: #969696;
        text-align: center;
        position: relative;
        .screen {
          background-position: -1.96rem -0.026666rem;
          width: 0.4rem;
          height: 0.426666rem;
          position: absolute;
          top: 0.466666rem;
          right: 0;
        }
      }
    }

    .sourcing-container-body {
      width: 100%;
      background-color: #f4f4f4;
      height: 8.786666rem;
      padding: 0 0.266666rem 0 0.2rem;
      margin-bottom: 1.2rem;
      .container-b-t {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 1.333333rem;
        font-size: 0.426666rem;
        line-height: 1.333333rem;
        color: #787878;
        border-bottom: 1px solid #e5e5e5;
        position: relative;
        &::before {
          content: '';
          background: url(../../../static/images/saa_Spirit.png) no-repeat;
          background-size: 4rem 4.48rem;
          display: inline-block;
          vertical-align: middle;
          background-position: 0 0;
          width: 0.466666rem;
          height: 0.466666rem;
          margin-right: 0.133333rem;
          top: 0;
          left: 0;
          line-height: 1.333333rem;
        }
      }
      #sourcing-main-out,
      #sourcing-main-entry {
        width: 100%;
        height: 557px;
      }
    }

    .sourcing-container-footer {
      border-top: 2px solid #e5e5e5;
      .sourcing-warp-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.466666rem 0.266666rem 0.466666rem 0.133333rem;
        border-bottom: 1px solid #e5e5e5;
        .item-warp-left {
          display: flex;
          align-items: center;
          width: 35%;
          div {
            text-align: left;
            span,
            p {
              font-size: 0.346666rem;
              color: #7d7d7d;
            }
          }
        }
        .item-warp-center {
          width: 30%;
          text-align: center;
          span {
            font-size: 0.32rem;
            color: #7e7e7e;
          }
        }
        .item-warp-right {
          width: 35%;
          text-align: right;
          span {
            color: #e37571;
            font-size: 0.32rem;
          }
        }
      }
    }
  }

  .sourcing-container-footer i.saa-icon {
    width: 0.773333rem;
    height: 0.773333rem;
    margin-right: 0.333333rem;
  }

  .sourcing-container-footer i.saa-icon.xsck {
    background-position: -3.266666rem -0.066666rem;
    width: 0.66rem;
    height: 0.64rem;
  }

  .sourcing-container-footer i.saa-icon.qtck {
    background-position: -3.29rem -3.786666rem;
    width: 0.636666rem;
    height: 0.636666rem;
  }

  .sourcing-container-footer i.saa-icon.llck {
    background-position: -3.346666rem -0.8rem;
    width: 0.533333rem;
    height: 0.666666rem;
  }

  .sourcing-container-footer i.saa-icon.pkck {
    background-position: -3.266666rem -1.52rem;
    width: 0.693333rem;
    height: 0.693333rem;
  }

  .sourcing-container-footer i.saa-icon.dbck {
    background-position: -3.266666rem -2.306666rem;
    width: 0.666666rem;
    height: 0.613333rem;
  }

  .sourcing-container-footer i.saa-icon.zyck {
    background-position: -3.266666rem -3.013333rem;
    width: 0.693333rem;
    height: 0.693333rem;
  }

  .sourcing-container-footer i.saa-icon.pyrk {
    background-position: -1.68rem -3.04rem;
    width: 0.693333rem;
    height: 0.693333rem;
  }

  .sourcing-container-footer i.saa-icon.cgrk {
    background-position: -1.68rem -2.266666rem;
    width: 0.666666rem;
    height: 0.706666rem;
  }

  .sourcing-container-footer i.saa-icon.scrk {
    background-position: -1.68rem -3.786666rem;
    width: 0.64rem;
    height: 0.64rem;
  }

  .vm-screen-warp {
    width: 600px;
    margin-top: 90px;
    height: 100%;
    .vm-require-warp {
      overflow: scroll;
      height: calc( 100% - 203px );
      position: relative;
      .vm-require-screen-item {
        display: flex;
        flex-direction: column;
        margin-left: 40px;
        padding-bottom: 40px;
        &:last-child {
          padding-bottom: 113px;
        }
        h5 {
          color: #000;
          font-size: 26px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 65px;
          &::before {
            content: '';
            width: 5px;
            height: 24px;
            background-color: #f34c4f;
            display: inline-block;
            margin-right: 18px;
          }
        }
        ul.vm-require-screen-list {
          display: flex;
          flex-wrap: wrap;
          li {
            background-color: #eeeeee;
            width: 170px;
            height: 60px;
            font-size: 24px;
            color: #999999;
            display: flex;
            margin-right: 10px;
            align-items: center;
            justify-content: center;
            border-radius: 10px; /* no */
            margin-bottom: 10px;
            position: relative;
            &.now {
              background-color: #ffffff;
              color: #d8271b;
              border: 1px solid #d8271b; /* no */
              &::before {
                content: '√';
                display: flex;
                align-items: center;
                margin-right: 10px;
              }
            }
          }
        }
        ul.vm-require-screen-time {
          display: flex;
          align-items: center;
          li {
            margin-right: 30px;
            width: 250px;
            height: 55px;
            border: 1px solid #eeeeee; /* no */
            border-radius: 15px; /* no */
            display: flex;
            justify-content: center;
            align-items: center;
            color: #999;
            font-size: 20px;
            background-color: #fff;
            &:nth-child(2) {
              width: 20px;
              height: 4px;
              background-color: #eeeeee;
            }
          }
        }
        ul.vm-require-screen-company {
          display: flex;
          li {
            flex: 1;
            margin-right: 20px;
            input {
              border-radius: 15px; /* no */
              height: 55px;
            }
          }
        }
        ul.saa-search-data.com-box {
          & > li.active {
            color: #D9271B;
            border: 1px solid #D9271B; /* no */
          }
          & > li {
            height: 0.8rem;
            padding: 0 0.373333rem;
            border: 1px solid #666666; /* no */
            margin: 0.266666rem 0.266666rem 0 0;
            border-radius: 15px;
            line-height: 0.773333rem;
            color: #A0A0A0;
            text-align: left;
            &:first-child {
              width: 1.866666rem;
              text-align: center;
            }
          }

        }
      }
    }
    .vm-screen-footer {
      border-top: 1px solid #eeeeee; /* no */
      position: absolute;
      bottom: 90px;
      width: 100%;
      left: 0;
      height: 113px;
      border-top: 1px solid #eee; /* no */
      display: flex;
      justify-content: space-between;
      button {
        flex: 1;
        width: 50%;
        height: 78px;
        margin: 21px 20px 12px 30px;
        border-radius: 10px; /* no */
        &:first-child {
          border: 1px solid #d9271b; /* no */
          background-color: #fff;
          color: #d8261d;
        }
        &:last-child {
          background-color: #f34c4f;
          color: #fff;
          font-size: 24px;
        }
      }

    }
  }


</style>
